(function() {
    Nokia.TransitionList = Nokia.Widget.extend({
        initialize: function(options) {
            var instance = this;

			var defaults = {
				title: '',
				maximized: true,
				visible: false
			};

            instance.options = jQuery.extend(defaults, options);

            instance.element = jQuery( instance.options.element );

            instance._super.apply(instance, [instance.options]);

			instance.registerData("transitionlist");

			instance._create();

			instance.registerVibrationOn([ ]);

			instance.items = [];

			instance.fireCallback('create');
        },

		addItem: function(item) {
			var instance = this;
			item.transitionList = instance;
			instance.items.push(item);
			Nokia.dom.append(instance.element, item.getElement());
			instance.fireCallback('addItem', null, item);
		},

		removeItem: function(item) {
			var instance = this;
			var index = jQuery.inArray(item, instance.items);

			if (index != -1) {
				var item = instance.items[index];

				item.getElement().remove();
				instance.fireCallback('removeItem', item);
				Nokia.util.arrayRemove(instance.items, index);
			}
		},

		show: function(openerTransitionList) {
			var instance = this;
			var element = instance.element;

			var offset = openerTransitionList.element.offset();

			element.css({
				position: 'absolute',
				top: offset.top,
				left: offset.left
			});

			openerTransitionList.hide();

			Nokia.animation.fadeIn(element);

			instance.fireCallback('show', openerTransitionList);
		},

		hide: function() {
			var instance = this;
			Nokia.animation.fadeOut(instance.element);
			instance.fireCallback('hide');
		},

		_create: function() {
			var instance = this;
			var options = instance.options;
			var element = instance.element;
			var Styles = instance.Styles;

			instance.titleWrapper = Nokia.dom.parseHTML('<div class="' + [Styles.transitionListTitle, Styles.uiWidgetHeader, Styles.uiStateDefault].join(' ') + '"></div>');
			instance.itemsWrapper = Nokia.dom.parseHTML('<div class="' + [Styles.transitionListItems].join(' ') + '"></div>');

			instance.titleWrapper.html(options.title);

			if (options.visible) {
				element[0].style.display = 'block';
			}

			if (options.maximized) {
				Nokia.util.maximize(element);
			}

			Nokia.dom.append(element, instance.titleWrapper);
			Nokia.dom.append(element, instance.itemsWrapper);

			element.addClass( [Styles.transitionList, Styles.uiStateDefault, Styles.uiHelperClearFix].join(' ') );
		},

		Styles: {
			transitionList: 'nokia-transitionlist',
			transitionListTitle: 'nokia-transitionlist-title',
			transitionListItems: 'nokia-transitionlist-items',
			uiStateDefault: 'ui-state-default',
			uiHelperClearFix: 'ui-helper-clearfix',
			uiWidgetHeader: 'ui-widget-header'
		}
    });




	Nokia.TransitionListItem = Nokia.Widget.extend({
        initialize: function(options) {
            var instance = this;

			var defaults = {
				label: '',
				click: function() {}
			};

            instance.options = jQuery.extend(defaults, options);

			instance.linkedList = instance.options.linkedList;

            instance._super.apply(instance, [instance.options]);

			instance.registerData("transitionlistitem");

			instance._create();

			instance.registerVibrationOn([ ]);

			instance._attachEvents();

			instance.fireCallback('create');
        },

		_attachEvents: function() {
			var instance = this;
			var options = instance.options;
			var element = instance.element;
			var Styles = instance.Styles;

			if (options.linkedList) {
				element.click(function(event) {
					options.linkedList.show(instance.transitionList);

					element.removeClass(Styles.uiStateHover);
				});
			}

			element.hover(
				function() {
					element.addClass(Styles.uiStateHover);
				},
				function() {
					element.removeClass(Styles.uiStateHover);
				}
			);

			element.click(function(event) {
				instance.fireCallback('click', event);
			});

			Nokia.util.bindEnter(element, function() {
				element.trigger('click');
			});
		},

		getElement: function() {
			var instance = this;
			return instance.element;
		},

		_create: function() {
			var instance = this;
			var options = instance.options;
			var Styles = instance.Styles;

			var element = Nokia.dom.parseHTML('<a href="javascript:void(0);" class="' + [Styles.transitionListItem, Styles.uiWidgetHeader, Styles.uiStateDefault].join(' ') + '"></a>');

			instance.element = element;

			instance.itemLabelWrapper = Nokia.dom.parseHTML('<div class="' + [Styles.transitionListItemLabel].join(' ') + '"></div>');
			instance.itemIcon = Nokia.dom.parseHTML('<div class="' + [Styles.transitionListItemIcon].join(' ') + '"></div>');

			if (!options.icon && options.linkedList) {
				instance.itemIcon.addClass( [Styles.uiIcon, Styles.uiIconPlus].join(' ') );
			}

			if (options.icon) {
				instance.itemIcon.addClass( [Styles.uiIcon, options.icon].join(' ') );
			}

			if (options.hideIcon) {
				Nokia.util.hide(instance.itemIcon[0]);
			}

			instance.itemLabelWrapper.html(options.label);

			Nokia.dom.append(element, instance.itemLabelWrapper);
			Nokia.dom.append(element, instance.itemIcon);
		},

		Styles: {
			transitionListItemLabel: 'nokia-transitionlist-item-label',
			transitionListItemIcon: 'nokia-transitionlist-item-icon',
			transitionListItem: 'nokia-transitionlist-item',
			uiStateDefault: 'ui-state-default',
			uiStateHover: 'ui-state-hover',
			uiWidgetHeader: 'ui-widget-header',
			uiIcon: 'ui-icon',
			uiIconPlus: 'ui-icon-plusthick'
		}
    });




	Nokia.TransitionBox = Nokia.TransitionList.extend({
		initialize: function(options) {
			var instance = this;

			var defaults = {
				nextLabel: 'Next',
				prevLabel: 'Prev',
				maximized: true,
				icons: {
					prev: '',
					next: ''
				}
            };

            instance.options = jQuery.extend(defaults, options);

            instance._super.apply(instance, [ instance.options]);

			instance.registerData("transitionbox");
        },

		setNextTransitionBox: function(transitionBox) {
			var instance = this;
			var options = instance.options;
			var Styles = instance.Styles;
			instance.nextTransitionBox = transitionBox;

			instance.nextTransitionItem = new Nokia.TransitionListItem({
				label: options.nextLabel,
				icon: options.icons.next,
				linkedList: transitionBox,
				hideIcon: true
			});

			var nextElement = instance.nextTransitionItem.element;

			nextElement.addClass([Styles.transitionBoxNext, Styles.uiPriorityPrimary].join(' '));

			if (!transitionBox) {
				nextElement.addClass(Styles.uiStateDisabled);
				nextElement.removeClass(Styles.uiPriorityPrimary);
				nextElement.unbind('mouseenter');
				instance.nextTransitionItem.registerVibrationOn([ ]);
			}

			instance.addItem(instance.nextTransitionItem);
		},

		setPrevTransitionBox: function(transitionBox) {
			var instance = this;
			var options = instance.options;
			var Styles = instance.Styles;
			instance.prevTransitionBox = transitionBox;

			instance.prevTransitionItem = new Nokia.TransitionListItem({
				label: options.prevLabel,
				icon: options.icons.prev,
				linkedList: transitionBox,
				hideIcon: true
			});

			var prevElement = instance.prevTransitionItem.element;

			prevElement.addClass( [Styles.transitionBoxPrev, Styles.uiPriorityPrimary].join(' ') );

			if (!transitionBox) {
				prevElement.addClass(Styles.uiStateDisabled);
				prevElement.removeClass(Styles.uiPriorityPrimary);
				prevElement.unbind('mouseenter');
				instance.prevTransitionItem.registerVibrationOn([ ]);
			}

			instance.addItem(instance.prevTransitionItem);
		},

		_create: function() {
			var instance = this;
			var options = instance.options;
			var Styles = instance.Styles;
			var element = instance.element;

			instance._super();

			instance.titleWrapper.addClass(Styles.transitionBoxBorderless);

			instance.contentWrapper = Nokia.dom.parseHTML('<div class="' + [ Styles.transitionListContent, Styles.uiWidgetHeader, Styles.uiStateDefault, Styles.transitionBoxBorderless].join(' ') + '"></div>');

			if (options.content) {
				instance.contentWrapper[0].innerHTML = options.content;
			}

			if (options.maximized) {
				Nokia.util.maximize(element);
			}

			Nokia.dom.append(element, instance.contentWrapper);
		},

		Styles: {
			transitionList: 'nokia-transitionbox',
			transitionListTitle: 'nokia-transitionlist-title',
			transitionListContent: 'nokia-transitionbox-content',
			transitionListItems: 'nokia-transitionlist-items',
			transitionBoxNext: 'nokia-transitionbox-next',
			transitionBoxPrev: 'nokia-transitionbox-prev',
			transitionBoxBorderless: 'nokia-transitionbox-borderless',
			uiHelperClearFix: 'ui-helper-clearfix',
			uiStateDefault: 'ui-state-default',
			uiStateDisabled: 'ui-state-disabled',
			uiPriorityPrimary: 'ui-priority-primary',
			uiWidgetHeader: 'ui-widget-header'
		}
	});

})();